<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码找回</title>
    <link rel="stylesheet" href="css/findpw.css">
</head>
<body>
    <div id="app">
        <div class="formBox">
            <div class="leftBackground"></div>
            <div class="rightForm">
                <h1>找回密码</h1>
                <span style="font-size:20px;color:#8B8B8B;">Find the password</span>
                <input type="text" id="inputUid" class="input" placeholder="请输入学号(Please enter the student id)" v-model="user.u_id">
                <div>
                    <input type="text" id="inputPin" class="inputpin" style="font-size: 14px;margin-top: 10%;font-weight: bold;border:0;border-bottom:solid;" placeholder="请输入内容(Please enter the verification code)"v-model="inputpin">
                    &nbsp;&nbsp;
                    <input type="button" id="pin_submit" @click="mail" value="发送验证码">
                </div>
                <input type="text" id="inputNpw" class="input" placeholder="请输入新密码(Please enter the new password)" v-model="user.password">
                <input type="button" id="submit" @click="check" value="确认">
            </div>
        </div>
    </div>

    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>

    <script>
        function check() {
        }
        //定义vue应用配置
        const app = {
            //data函数专门用来定义数据
            data(){
                return {
                    //定义登录数据
                    user:{
                        u_id:'',
                        password: ''
                    },
                    loadIdx:null,
                    pin:'',
                    inputpin:'',
                };
            },
            //定义方法
            methods : {
                //登录
                mail(){
                    //将登录数据发送至服务器
                    this.loadIdx = layer.load();
                    myAxios.post('/findpw',this.user)
                        .then(res=>{
                            layer.close(this.loadIdx);
                            pin=res.data;
                            if(pin!=="99"){
                                layer.msg('发送验证码成功！', {icon: 1},()=>{
                                });
                            }else{
                                layer.msg('该用户未注册！', {icon: 2});
                            }
                        })
                        .catch(err=>{
                            layer.close(this.loadIdx);
                            layer.msg('系统错误！', {icon: 2});
                        });
                },
                check(){
                    this.loadIdx = layer.load();
                    if(this.user.password===''){
                        layer.msg('新密码不能为空', {icon: 2},()=>{
                            window.location.href = 'findpw.html';
                        })
                    }else {
                        if (pin===this.inputpin){
                            layer.msg('验证码正确', {icon: 1},()=>{
                                myAxios.post('/updatepw',this.user)
                                    .then(res=>{
                                        if(res.data.success){
                                            layer.msg('修改成功！', {icon: 1},()=>{
                                                window.location.href = 'login.html';
                                            });
                                        }else{
                                            layer.msg('系统错误！', {icon: 2});
                                        }
                                        window.location.href = 'login.html';
                                    });
                            })
                        }else{
                            layer.msg('验证码错误', {icon: 2},()=>{
                                window.location.href = 'findpw.html';
                            });
                        }
                    }

                }
            }
        };
    Vue.createApp(app).mount('#app')
</script>

</body>
</html>